<template>
  <el-dialog v-if="dialogQrcodeVisible" width="60%" title="编辑群活码" :visible.sync="dialogQrcodeVisible" :close-on-click-modal="false">
    <el-form ref="qrcodeForm" :model="qrcodeParams" :rules="qrcodeRules" label-width="8rem">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="活码名称：">
            <el-input v-model="qrcodeParams.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分组：" prop="classId">
            <el-input v-model="qrcodeParams.classId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用场景：" prop="scneDescription">
            <el-input v-model="qrcodeParams.scneDescription" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="选择群：">
            <el-row :gutter="40">
              <el-col :span="24" style="vertical-align: bottom">
                <el-button class="el-icon-plus" plain type="primary" size="mini" @click="openGroupSelectDialog">选择群</el-button>
              </el-col>
              <el-col :span="24">
                <el-input v-model="qrcodeParams.classId" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="自动创建新群：">
            <el-row :gutter="40">
              <el-col :span="24">
                <el-switch v-model="qrcodeParams.autoNewGroup" />
              </el-col>
              <el-col v-if="qrcodeParams.autoNewGroup" :span="24">
                <el-card shadow="never" style="background: #ffffe;">
                  <div style="width:100%">
                    <el-row :gutter="40">
                      <el-col :span="14">
                        <el-form-item label="群名前缀：" prop="scneDescription" label-width="6rem">
                          <el-input v-model="qrcodeParams.scneDescription" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                        <el-form-item label="起始顺序号：" prop="scneDescription" label-width="6rem">
                          <el-input v-model="qrcodeParams.scneDescription" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="进群自动打标：">
            <el-row :gutter="40">
              <el-col :span="24">
                <el-switch v-model="qrcodeParams.autoTags" />
              </el-col>
              <el-col v-if="qrcodeParams.autoTags" :span="24">
                <el-card shadow="never" style="background: #ffffe;">
                  <el-row :gutter="40">
                    <el-col :span="24">
                      <el-button class="el-icon-plus" plain type="primary" size="mini" @click="submitGroupClass">添加标签</el-button>
                    </el-col>
                    <el-col :span="24">
                      <el-input v-model="qrcodeParams.classId" />
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="人数上限提醒：">
            <el-row :gutter="40">
              <el-col :span="12">
                <el-switch v-model="qrcodeParams.fullNotify" />
              </el-col>
              <el-col v-if="qrcodeParams.fullNotify" :span="24">
                <el-card shadow="never" style="background: #ffffe;">
                  <el-row :gutter="40">
                    <el-col :span="24">
                      <el-button class="el-icon-plus" plain type="primary" size="mini" @click="submitGroupClass">添加提醒人</el-button>
                    </el-col>
                    <el-col :span="24">
                      <el-input v-model="qrcodeParams.classId" />
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogQrcodeVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitQrcode">确 定</el-button>
    </div>
    <group-select ref="groupSelect" @handleSelected="handleSelected" />
  </el-dialog>
</template>

<script>
import { viewGroupQrcode, addGroupQrcode, modifyGroupQrcode } from '@/api/cop/groupQrcode'
import groupSelect from './groupSelect'
export default {
  components: {
    groupSelect
  },
  props: {
    qrcodeId: {
      required: false,
      type: String,
      default: ''
    },
    classId: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogQrcodeVisible: false,
      qrcodeParams: {},
      qrcodeRules: {
        name: [{ required: true, message: '请填写角色名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init() {
      if (this.qrcodeId) {
        viewGroupQrcode({ id: this.qrcodeId }).then(response => {
          this.qrcodeParams = response
          this.dialogQrcodeVisible = true
        })
      } else {
        this.qrcodeParams = {}
        this.dialogQrcodeVisible = true
      }
    },
    openGroupSelectDialog() {
      setTimeout(() => {
        this.$refs.groupSelect.init()
      })
    },
    handleSelected() {

    },
    submitQrcode() {
      this.$refs.qrcodeForm.validate(valid => {
        if (valid) {
          if (this.qrcodeId) {
            modifyGroupQrcode(this.qrcodeParams).then(response => {
              this.$message.success('修改成功')
              this.$emit('refresh')
              this.dialogQrcodeVisible = false
            })
          } else {
            addGroupQrcode(this.qrcodeParams).then(response => {
              this.$message.success('添加成功')
              this.$emit('refresh')
              this.dialogQrcodeVisible = false
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
